<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <input type="text" id="input">
  <p id="p"></p>
  <script>
    const data = {}
    Object.defineProperty(data, 'value', {
      get() {
        // 控制台获取data.value
        return this._value
      },
      // 监听value的变化
      set(v) {
        this._value = v
        input.value = v
        p.innerHTML = v
      }
    })
    const input = document.getElementById('input')
    // 添加input监听
    input.addEventListener('input', function (e) {
      // 当input的value值变化的时候 将新值赋给data的属性value
      data.value = e.target.value
    })
    const p = document.getElementById('p')
  </script>
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
  <input type="text" id="textInput">
  输入：<span id="textSpan"></span>
  <script>
    var obj = {},
        textInput = document.querySelector('#textInput'),
        textSpan = document.querySelector('#textSpan');

    Object.defineProperty(obj, 'foo', {
      set: function (newValue) {
        textInput.value = newValue;
        textSpan.innerHTML = newValue;
      }
    });

    textInput.addEventListener('keyup', function (e) {
        obj.foo = e.target.value;
    });

  </script>
</body>
</html> -->